<div id="filter" ref="sidebar" class="sidebar" :style="{ width: sidebar.width + 'px' }">
      <div style="padding-top: 10px"> </div>
      <h3>{{ dataset.name }}</h3>
      <p class="text-center" style="color: lightgray">
        <strong style="color: black">{{ imageCount }}</strong> 张图片
      </p>
      <div class="row justify-content-md-center sidebar-section-buttons">
        <!-- 生成目录 -->
        <button type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#generateDataset">
          <div v-if="generate.id != null" class="progress">
            <div class="progress-bar bg-success" :style="{ 'width': `${generate.progress}%` }">
              创建中
            </div>
          </div>
          <div v-else>创建子目录</div>
        </button>
        <!-- 浏览文件 -->
        <button type="button" class="btn btn-secondary btn-block" @click="createScanTask">
          <div v-if="scan.id != null" class="progress">
            <div class="progress-bar bg-secondary" :style="{ 'width': `${scan.progress}%` }">
              扫描中
            </div>
          </div>
          <div v-else>扫描目录</div>
        </button>
        <!-- 批量标注 -->
        <button type="button" class="btn btn-danger btn-block" @click="createBatchTask">
          <div v-if="batchLabeling.id != null" class="progress">
            <div class="progress-bar bg-primary" :style="{ 'width': `${batchLabeling.progress}%` }">
              标注中
            </div>
          </div>
          <div v-else>批量标注</div>
        </button>
        <!-- 引入coco -->
        <button type="button" class="btn btn-primary btn-block" @click="importModal">
          <div v-if="importing.id != null" class="progress">
            <div class="progress-bar bg-primary" :style="{ 'width': `${importing.progress}%` }">
              导入中
            </div>
          </div>
          <div v-else>导入 COCO</div>
        </button>
        <!-- 导出coco -->
        <button type="button" class="btn btn-dark btn-block" @click="exportModal">
          <div v-if="exporting.id != null" class="progress">
            <div class="progress-bar bg-dark" :style="{ 'width': `${exporting.progress}%` }">
              导出中
            </div>
          </div>
          <div v-else>导出 COCO</div>
        </button>
      </div>
      <hr>
      <!-- 子目录 -->
      <h6 class="sidebar-title text-center">子目录</h6>
      <div class="sidebar-section" style="max-height: 30%; color: lightgray">
        <div v-if="subdirectories.length > 0">
          <button v-for="(subdirectory, subId) in subdirectories" :key="subId"
            class="btn badge badge-pill badge-primary category-badge" style="margin: 2px"
            @click="folders.push(subdirectory)">
            {{ subdirectory }}
          </button>
        </div>
        <p v-else style="margin: 0; font-size: 13px; color: gray">
          无子目录
        </p>
      </div>
      <hr>
      <!-- 过滤图片 -->
      <h6 class="sidebar-title text-center">过滤查询</h6>
      <div class="sidebar-section" style="max-height: 30%; color: lightgray">
        <PanelString name="关键字" v-model="query.file_name__icontains" @submit="updatePage" />
        <PanelToggle name="已标注" v-model="panel.showAnnotated" />
        <PanelToggle name="未标注" v-model="panel.showNotAnnotated" />
        <!-- <PanelDropdown name="其它" v-model="order" :values="orderTypes" /> -->
      </div>
      <!-- 显示标注种类 -->
      <h6 class="sidebar-title text-center">显示标注种类</h6>
      <div class="sidebar-section" style="max-height: 30%; color: lightgray">
        <div class="form-group">
          <TagsInput v-model="selected.categories" element-id="selectedCategories"
            title="Only shows images annotated with the selected categories for 'Show Annotated' button. Leave empty to show all annotated images."
            :existing-tags="categoryTags" :typeahead="true" :typeahead-activation-threshold="0"></TagsInput>
        </div>
      </div>
    </div>

    <!-- 上方导航栏 -->
      <nav class="nav border-bottom shadow-sm" style="background-color: #4b5162">
        <a class="btn tab" @click="tab = 'images'" :style="{ 'color': tab == 'images' ? 'white' : 'darkgray' }">
          <i class="fa fa-picture-o" aria-hidden="true"></i> 图片
        </a>
        <a class="btn tab" @mousedown="createUploadImage"
          :style="{ 'color': uploadTab == true ? 'white' : 'darkgray' }">
          <i class="fa fa-plus" aria-hidden="true"></i> 上传
        </a>
        <a class="btn tab" @click="tab = 'exports'" :style="{ 'color': tab == 'exports' ? 'white' : 'darkgray' }">
          <i class="fa fa-share" aria-hidden="true"></i> 导出
        </a>
      </nav>
